<!-- 瀑布流列表组件 -->

<template>
    <view class="Index">
        <!-- 瀑布流布局列表 -->
        <view class="pubuBox">
            <view class="pubuItem">
                <view @tap="goPdVideo(item.id)" class="item-masonry" v-for="item, in list" :key="item.id">
                    <i class="videoIcon iconfont icon-bofang"></i>
                    <image :src="item.imgUrl" mode="widthFix"></image>
                    <view class="listtitle"> <!-- 这是没有高度的父盒子（下半部分） -->
                        <view class="listtitle1">{{ item.title }}</view>
                        <view class="listtitle2">
                            <view>
                                <image src="http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg"
                                    mode="scaleToFill" />

                                <text class="author">
                                    {{ item.author }}
                                </text>
                            </view>

                            <view class="giveLike">
                                <i style="display: inline-block;" class="iconfont icon-dianzan"></i><text>{{
                                    item.giveLike }}</text>
                            </view>

                        </view>
                        <view class="time">
                            {{ item.publishTiem }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>



</template>

<script lang="ts" setup>


import type { ArticleItem } from '@/types/article'
// 定义 props 接收
defineProps<{
    list: ArticleItem[]
}>()




/**跳转至视频播放页
 * @param id 视频id */
function goPdVideo(id: string) {
    console.log("跳转至视频播放页" + id);

    uni.navigateTo({
        url: '/pages/PdVideo/PdVideo?id=' + id
    });


}


</script>

<style scoped="scoped" lang="scss">
//瀑布流
page {
    background-color: #eee;
    height: 100%;
}


.pubuBox {
    padding: 22rpx;
}

.pubuItem {
    column-count: 2;
    column-gap: 20rpx;
}

.item-masonry {
    position: relative;
    box-sizing: border-box;
    border-radius: 15rpx;
    overflow: hidden;
    background-color: #fff;
    break-inside: avoid;
    /*避免在元素内部插入分页符*/
    box-sizing: border-box;
    margin-bottom: 20rpx;
    box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);

    .videoIcon {
        position: absolute;
        right: 10rpx;

        font-size: 40px;
    }
}

.item-masonry image {
    width: 100%;
}





.listtitle {
    padding-left: 22rpx;
    font-size: 24rpx;
    padding-bottom: 22rpx;

    .listtitle1 {
        line-height: 39rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 39rpx;
        max-height: 78rpx;
    }

    .listtitle2 {
        font-size: 28rpx;
        line-height: 28rpx;
        font-weight: bold;
        padding-top: 22rpx;
        display: flex;
        justify-content: space-between;

        image {
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            border: 2px solid #19d1c3;
            overflow: hidden;
            vertical-align: middle;
        }

        .author {
            align-content: center;
            font-size: 24rpx;
            line-height: 24rpx;
            margin-left: 5rpx;

        }


    }

    .time {
        font-size: 28rpx;
        color: #909399;
        line-height: 28rpx;
        padding-top: 22rpx;
    }
}

.Index {
    width: 100%;
    height: 100%;
}
</style>



<style lang="scss"></style>
